<template>
  <SModal
    v-model:show="modalShow"
    :title="modalTitle" @positive-click="onSubmit"
    >
    <SForm
        ref="formRef"
        :model="formValue"
    >
      <n-gi :span="12">
        <SFormInput name="musicName" label="歌名" required v-model:value="formValue.musicName" @load-rules="loadRules"/>
      </n-gi>
      <n-gi :span="12">
        <SFormSelect name="singerId" :data="singerList" label="歌手" required v-model:value="formValue.singerId" @load-rules="loadRules"/>
      </n-gi>
      <n-gi :span="12">
        <SFormUpload :data="{folderName:'music'}"
                     @finish="onFinish"
                     name="musicFileId" label="上传歌曲" required v-model:value="formValue.musicFileId" @load-rules="loadRules"/>
      </n-gi>
      <n-gi :span="12">
        <SFormUploadImg :data="{folderName:'musicPic'}" name="picFileId" label="上传图片" required v-model:value="formValue.picFileId" @load-rules="loadRules"/>
      </n-gi>

<!--      <n-gi :span="24">-->
<!--        <SFormInput name="intro" type="textarea" label="简介" required v-model:value="formValue.intro" @load-rules="loadRules"/>-->
<!--      </n-gi>-->
    </SForm>
  </SModal>
</template>
<script setup>
import SModal from "@/components/public/SModal/SModal.vue";
import useSModal from "@/components/public/SModal/useSModal";
import SForm from "@/components/public/extForm/SForm.vue";
import SFormInput from "@/components/public/extForm/SFormInput.vue";
import SFormUpload from "@/components/public/extForm/SFormUpload.vue";
import {querySingerSelect} from "@/api/music/singerApi";
import SFormSelect from "@/components/public/extForm/SFormSelect.vue";
import SFormUploadImg from "@/components/public/extForm/SFormUploadImg.vue";
import {addMusic} from "@/api/music/musicApi";

const formDefValue = {

}
const api = {
  addApi:addMusic
}
const {
  onAdd,
  loadRules,
  modalShow,
  modalLoading,
  modalTitle,onSubmit,
  formValue,
  formRef,
} = useSModal("歌曲",formDefValue,api);

defineExpose({
  onAdd,
  modalLoading
})
function onFinish(res){
  const {file,data} = res;
  formValue.value['musicLength'] = data.musicLength
}
const singerList = ref([])
// const types = ref([])
watch(()=>modalShow.value,(value)=>{
  if (value){
    querySingerSelect().then(res=>{
      singerList.value = res.data
    })
    // getDictSelectByTypeCode("music.type").then(res=>{
    //   types.value = res.data || []
    // })
  }
})
</script>
